import React, { useState } from "react";

//context state 类型定义
interface AppStateValue {
  username: string;
  shoppingCart: { items: { id: number; name: string }[] };
}
// state 初始数据
const defaltContextValue: AppStateValue = {
  username: "唐僧",
  shoppingCart: { items: [] },
};
export const appContext = React.createContext(defaltContextValue);
export const appSetStateContext = React.createContext<
  React.Dispatch<React.SetStateAction<AppStateValue>> | undefined
>(undefined);
//封装Provider组件
export const AppStateProvider: React.FC = (props) => {
  const [state, setstate] = useState(defaltContextValue);
  return (
    <appContext.Provider value={state}>
      <appSetStateContext.Provider value={setstate}>
        {props.children}
      </appSetStateContext.Provider>
    </appContext.Provider>
  );
};
